<template>
  <div
    v-if="item.data"
    class="custom_float_downloadbutton"
    :class="item.data.direction"
    @click="downloadClickHandle"
    :style="{ bottom: ($isMPWeiXin ? 90 : 60) / 23.44 + 'rem' }"
  >
    {{ item.data.info }}
  </div>
</template>
<script>
export default {
  name: "floatdownloadbutton",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    downloadClickHandle() {
      this.$parent.$emit("downloadClickHandle", this.$props.item.data.url);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_float_downloadbutton {
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
  position: fixed;
  padding: (5 / @base) (10 / @base);
  text-align: center;
  background-color: #29bb89;
  border-radius: (20 / @base);
  overflow: hidden;
  font-size: (14 / @base);
  color: #fff;
  &.left {
    left: (20 / @base);
    top: 50%;
  }
  &.top {
    top: (60 / @base);
    left: 35%;
    right: 35%;
  }
  &.right {
    right: (20 / @base);
    top: 50%;
  }
  &.bottom {
    bottom: (60 / @base);
    left: 35%;
    right: 35%;
  }
}
</style>
